<template>
    <div class="madp-black-list">
        <basic-container>
            <div class="madp-search">
                <el-form :model="searchForm" ref="searchForm" label-width="100px" class="madp-search-form">
                    <el-form-item label="客户名称:">
                        <el-input v-model.trim="searchForm.contactName" maxlength="20" placeholder="请输入客户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="操作员工:">
                        <el-select v-model="searchForm.employeeId" filterable clearable>
                            <el-option v-for="item in employeeList" :key="item.employeeId" :label="item.name" :value="item.employeeId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="madp-search-right madp-ml10">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                    <el-button @click="clearSearchForm">清空</el-button>
                </div>
            </div>
            <!-- 黑名单列表数据 -->
            <el-table
                :data="blackData"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
                v-loading="blackTableLoading"
            >
                <el-table-column prop="contactName" label="客户" align="center"></el-table-column>
                <el-table-column prop="contactId" label="客户id" align="center"></el-table-column>
                <el-table-column prop="createTime" label="操作时间" align="center"></el-table-column>
                <el-table-column prop="employeeName" label="操作人" align="center"></el-table-column>
                <el-table-column prop="reason" label="原因" align="center"></el-table-column>
                <el-table-column label="操作" align="center" v-if="permissions.cp_black_list_reset">
                    <template slot-scope="scope">
                        <el-button type="text" @click="removeBlackData(scope.row)">恢复</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 列表分页 -->
            <el-pagination
                background
                class="madp-black-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
            ></el-pagination>
        </basic-container>
    </div>
</template>
<script>
import { getDepartmentList } from '@/api/common-interface/department';
import { blackList, removeBlack } from '@/api/customer/black-list';
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            // 查询表单
            searchForm: {
                contactName: '',
                employeeId: ''
            },
            // 表格数据
            blackData: [],
            // 成员列表
            employeeList: [],
            // 分页
            pagination: {
                current: 1,
                size: 10
            },
            // 表格loading开关
            blackTableLoading: false
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    created() {
        this.fetchDepartmentList();
        this.fetchBlackList();
    },
    methods: {
        // 企业成员数据列表
        fetchDepartmentList() {
            getDepartmentList().then((res) => {
                if (res.data && res.data.code === 0) {
                    let data = res.data.data;
                    let { employee } = data;
                    this.employeeList = employee;
                }
            });
        },
        //获取黑名单列表
        fetchBlackList() {
            this.blackTableLoading = true;
            let searchFormData = Object.assign(this.searchForm, {
                size: this.pagination.size,
                current: this.pagination.current
            });
            for (let key in searchFormData) {
                if (!searchFormData[key]) {
                    delete searchFormData[key];
                }
            }
            blackList(searchFormData)
                .then((res) => {
                    if (res.data && res.data.code === 0) {
                        let data = res.data.data;
                        this.blackData = data.records;
                        let { current, size, pages, total } = data;
                        this.pagination = { current, size, pages, total };
                    }
                    this.blackTableLoading = false;
                })
                .catch(() => {
                    this.blackTableLoading = false;
                });
        },
        // 点击查询
        searchFn() {
            this.pagination.current = 1;
            this.fetchBlackList();
        },
        // 清空
        clearSearchForm() {
            this.searchForm = {};
            this.fetchBlackList();
        },
        // 恢复操作
        removeBlackData(row) {
            let obj = {
                id: row.id
            };
            this.blackTableLoading = true;
            removeBlack(obj)
                .then((res) => {
                    if (res.data && res.data.code === 0) {
                        this.$message.success('已从黑名单列表中移除！');
                        this.pagination.current = 1;
                        this.fetchBlackList();
                    }
                    this.blackTableLoading = false;
                })
                .catch(() => {
                    this.blackTableLoading = false;
                });
        },
        // 分页
        handleSizeChange(val) {
            this.pagination.size = val;
            this.pagination.current = 1;
            this.fetchBlackList();
        },
        // 分页
        handleCurrentChange(val) {
            this.pagination.current = val;
            this.fetchBlackList();
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-search {
    display: flex;
    justify-content: flex-end;
    &-form {
        display: flex;
        justify-content: flex-end;
    }
    &-right {
        min-width: 150px;
    }
}
.madp-black-pagination {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 10px;
}
</style>
